<template>
	<uni-popup ref="popup" class="public-share" type="bottom" border-radius="60" @maskClick="show = false"
		mask-background-color="rgba(0,0,0,0)" safe-area:true>
		<view class="share-main">
			<view class="othen-way">
				<template v-for="(item,index) in imgGroup">
					<!-- #ifndef APP-NVUE -->
					<imageForSize v-if="item.key !== 'twitter'" :class="index?'sub':'first'" size="134" :key="item.key"
						:src="item.img" @click="shareModel(item.key)" radius="36"></imageForSize>
					<view class="" @click="shareModel(item.key)" :class="index?'sub':'first'" v-else
						style="width: 134rpx;height: 134rpx;background-color: #323755;border-radius:36rpx;display: flex;align-items: center;justify-content: center;">
						<imageForSize size="60" :src="item.img"></imageForSize>
					</view>
					<!-- #endif  -->
					<!-- #ifdef APP-NVUE -->
					<image v-if="item.key !== 'twitter'" :class="index?'sub':'first'" :src="item.img"
						@click="shareModel(item.key)" style="width: 134rpx;height: 134rpx;border-radius:36rpx;" mode="">
					</image>
					<view class="" @click="shareModel(item.key)" :class="index?'sub':'first'" v-else
						style="width: 134rpx;height: 134rpx;background-color: #323755;border-radius:36rpx;display: flex;align-items: center;justify-content: center;">
						<image style="width: 60rpx;height: 60rpx;" :src="item.img"></image>
					</view>
					<!-- #endif  -->
				</template>

			</view>
			<!-- <view class="friends"> -->
			<scroll-view scroll-y style="height: 570rpx;" class="friends">
				<!-- #ifndef APP-NVUE -->
				<listItem :line="true" v-for="(item) in friends.list" :time="item.concernTime" :key="item.concernId"
					:name="item.nickName" :src="uni.$u.file.getMedieUrl(item.avatar || vuex_userDefaultTopImg)">
					<u-button type=primary plain size=mini class="slot-btn" @click="send(item.concernId)"
						slot="btn">send</u-button>
				</listItem>
				<!-- #endif  -->
				<!-- #ifdef APP-NVUE -->
				<list-item :line="true" v-for="(item) in friends.list" :time="item.concernTime" :key="item.concernId"
					:name="item.nickName" :src="uni.$u.file.getMedieUrl(item.avatar)">
					<button type=primary plain size=mini class="slot-btn" @click="send(item.concernId)"
						slot="btn">send</button>
				</list-item>
				<!-- <list-item :line="true" v-for="(item) in friends.list" :time="item.concernTime" :key="item.concernId"
					:name="item.nickName" :src="uni.$u.file.getMedieUrl(item.avatar)">
					<button type=primary plain size=mini class="slot-btn" @click="send(item.concernId)"
						slot="btn">send</button>
				</list-item> -->
				<!-- #endif  -->
				<template v-if="(!friends.list.length) && friends.isGet">
					<view class="no-friends">
						<text style="color: #ccc;font-size: 46rpx;">{{$t('cShare.nofriend')}}</text>
					</view>
				</template>
				<!-- </view> -->
			</scroll-view>
		</view>
		<u-modal></u-modal>
	</uni-popup>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		sendMessageToUser
	} from '@/common/tx_im.js'
	import store from '@/store/index.js'
	// #ifdef APP-NVUE 
	import listItem from '@/components/listItem/listItem.nvue'
	// #endif  
	export default {
		// #ifdef APP-NVUE
		components: {
			listItem
		},
		// #endif  
		name: "c-share",
		props: {
			value: {
				default: false,
				type: Boolean
			},
			data: {
				default: () => ({}),
				type: Object
			},
			sendUserData: {
				default: () => ({}),
				type: Object
			}
		},
		watch: {
			show: {
				handler(v1, v2) {
					if (v1) {
						this.$refs.popup.open()
						this.getFriendsAjax()
					} else {
						this.$nextTick(() => {
							this.$refs.popup.close()
						})
					}
				},
				immediate: true
			}
		},
		computed: {
			show: {
				get() {
					return this.value
					console.log(this.value, 9999);
				},
				set(val) {
					this.$emit('input', val)
				},
			},
			...mapState(['vuex_app_config', 'vuex_userDefaultTopImg'])
		},
		data() {
			return {

				// 第三方分享
				imgGroup: [{
					img: require('@/static/images/login/facebook.png'),
					key: 'facebook'
				}, {
					img: require('@/static/images/login/tiktok.png'),
					key: 'tiktok'
				}, {
					img: require('@/static/images/login/Twitter.png'),
					key: 'twitter'
				}, {
					img: require('@/static/images/login/ins.png'),
					key: 'ins'
				}],
				// 朋友分享
				friends: {
					data: {
						"pageSize": 20,
						"pageNum": 1,
						"startTime": "",
						"endTime": "",
						"id": "",
						"name": ""
					},
					list: [],
					isGet: false // 是否获取过
				},
				uni
			};
		},
		methods: {
			// 获取好友列表
			getFriendsAjax() {
				uni.$u.post('/app/user/concern/page/friend', this.friends.data).then(res => {
					this.friends = {
						...this.friends,
						list: res.data.records,
						isGet: true
					}
				})
			},
			send(id) {
				const sendUserData = JSON.stringify(this.sendUserData)
				if (sendUserData !== '{}') {
					sendMessageToUser(id, this.sendUserData.data, this.sendUserData.type)
				}
				uni.$u.toast('该功能暂未开放')
				this.$emit('send', id)
			},
			shareOther(key) {
				this.$emit('send', key)
				switch (key) {
					case 'facebook':
						// #ifdef H5
						try {
							window.location.href = 'fb://'; // 使用Facebook App的URL Scheme
						} catch (err) {
							this.$u.toast(this.$t('cShare.fbuninstalled'))
						}
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.launchApplication({
							pname: 'com.facebook.katana',
							action: 'fb://', // Twitter应用的URI Scheme
						}, function(e) {
							console.log(e);
						})
						// #endif
						break;
					case 'google':
						break;
					case 'tiktok':
						// #ifdef H5
						try {
							window.location.href = 'snssdk1128://'; // 使用Facebook App的URL Scheme
						} catch (err) {
							this.$u.toast($t('cShare.tkuninstalled'))
						}
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.launchApplication({
							pname: 'com.ss.android.ugc.aweme', // Android上的Twitter应用包名
							action: 'snssdk1128://timeline', // Twitter应用的URI Scheme
						}, function(e) {
							this.$u.toast($t('cShare.tkuninstalled'))
						})
						// #endif
						break;
					case 'twitter':
						// #ifdef H5
						try {
							window.location.href = 'twitter://'; // 使用Facebook App的URL Scheme
						} catch (err) {
							this.$u.toast($t('cShare.ttuninstalled'))
						}
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.launchApplication({
							pname: 'com.twitter.android', // Android上的Twitter应用包名
							action: 'twitter://timeline', // Twitter应用的URI Scheme
						}, function(e) {
							this.$u.toast($t('cShare.ttuninstalled'))
						})
						// #endif
						break;
					case 'ins':
						// #ifdef H5
						try {
							window.location.href = 'instagram://'; // 使用Facebook App的URL Scheme
						} catch (err) {
							this.$u.toast($t('cShare.insuninstalled'))
						}
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.launchApplication({
							pname: 'com.instagram.android', // Android上的Twitter应用包名
							action: 'instagram://timeline', // Twitter应用的URI Scheme
						}, function(e) {
							this.$u.toast($t('cShare.insuninstalled'))
						})
						// #endif
						break;
					default:
						break;
				}
			},
			// 
			shareModel(key) {
				this.show = false
				// 压缩
				const content =
					// this.lzw_encode(JSON.stringify({
					// 	name: this.data.name,
					// 	id: this.data.id,
					// 	p: this.data.p,
					// 	// title: 'lives-app'
					// })) +
					uni.$t('cShare.browserOpen') + this.vuex_app_config.clientIp + this.data.url

				let confirmText = uni.$t('cShare.goStick').replace("${slot}", key)
				let contentText = uni.$t('cShare.tickTo').replace("${slot}", `\n${content}`)
				console.log(confirmText, 'confirmText');
				uni.showModal({
					title: uni.$t('system.share'),
					content: 1 ? content : contentText,
					confirmText,
					success: ({
						confirm
					}) => {
						// 设置粘贴板
						uni.setClipboardData({
							data: content,
							showToast: false,
							shareUserId: '',
						})
						confirm && this.shareOther(key)
					}
				})
			},
			lzw_encode(s) {
				let dict = {};
				let data = (s + '').split('');
				let out = [];
				let currChar;
				let phrase = data[0];
				let code = 256;
				for (let i = 1, l = data.length; i < l; ++i) {
					currChar = data[i];
					if (dict[phrase + currChar] != null) {
						phrase += currChar;
					} else {
						out.push(phrase.length > 1 && dict[phrase] || phrase.charCodeAt(0));
						dict[phrase + currChar] = code;
						++code;
						phrase = currChar;
					}
				}
				out.push(phrase.length > 1 && dict[phrase] || phrase.charCodeAt(0));
				for (let i = 0, l = out.length; i < l; ++i) {
					out[i] = String.fromCharCode(out[i]);
				}
				return out.join('');
			} //LZW解压function lzw_decode(s) { let dict = {}; let data = (s + '').split(''); let currChar = data[0]; let oldPhrase = currChar; let out = [currChar]; let code = 256; let phrase; for (let i = 1, l = data.length; i < l; ++i) { let currCode = data[i].charCodeAt(0); if (currCode < 256) { phrase = data[i]; } else { phrase = dict[currCode] && dict[currCode] || (oldPhrase + currChar); } out.push(phrase); currChar = phrase.charAt(0); dict[code] = oldPhrase + currChar; ++code; oldPhrase = phrase; } return out.join('');}
		},
	}
</script>

<style scoped lang="scss">
	.public-share {
		z-index: 19990;

		.share-main {
			background-color: #fff;
			padding: 68rpx 46rpx 0;
			height: 833rpx;
			border-radius: 50rpx 50rpx 0 0;

			.othen-way {
				display: flex;
				flex-direction: row;

				.sub {
					margin-left: 40rpx;
				}

			}

			.friends {
				// padding-top: 30rpx;
				// height: 600rpx;
				// overflow: auto;
				// flex-direction: row;

				padding: 30rpx 30rpx 40rpx 30rpx;
				margin-top: 40rpx;

				/* #App-Plus */
				.no-friends {
					height: 600rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.user-list-item {
					margin-top: 30rpx;
					// >>> .avatar {
					// 	// height: 100%;
					// 	box-sizing: content-box;
					// 	padding-bottom: 30rpx;
					// 	border-bottom: 2rpx solid #F2F3F5;
					// }
				}

				.no-more {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.slot-btn {
					margin: 0;
					// margin-right: 14rpx;
					width: 158rpx;
					height: 48rpx;

					/*#ifndef APP-NVUE*/
					&:not(.u-primary-plain-hover) {
						background-color: #fff !important;
						color: #2934D0 !important;
						border-color: #2934D0 !important;
					}

					&.u-primary-plain-hover {
						background-color: #2934D0 !important;
					}

					/* #endif */
				}
			}


			/* #ifdef H5 */


			/* #endif */

			/* #ifdef APP-PLUS */

			/* #endif */
		}
	}
</style>